<template>
  <el-dialog
    top="30px"
    width="80%"
    append-to-body
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-tabs v-model="active" v-loading="loading">
      <el-tab-pane label="项目信息" name="first">
        <info-view :related-data="relatedData"></info-view>
      </el-tab-pane>
      <el-tab-pane label="附件信息">
        <attach-view :query-id="queryId" :visible="visible"></attach-view>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import AttachView from '@/credit/components/AttachView'
import InfoView from '@/credit/views/city/bus/normal/Info'
export default {
  components: {
    InfoView,
    AttachView,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      active: 'first',
      loading: false,
      relatedData: {},
    }
  },
  computed: {},
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      if (!this.queryId) {
        this.relatedData = {}
        return
      }
      this.loading = true
      this.$api
        .getDataFromId(this.$serviceName, 'customer_related', this.queryId)
        .then(res => {
          this.relatedData = res?.data ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.active = 'first'
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped></style>
